<script setup>
import {User, Lock} from '@element-plus/icons-vue'
import {ref, reactive} from 'vue'

const ruleForm = reactive({
  username: '',
  password: ''
})

//用于注册的表单校验模型
const registerDataRules = ref({
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'}
  ]
})

import {adminLoginService} from '@/api/admin.js'
import router from "@/router/index.js";
import {ElMessage} from "element-plus";
import {useTokenStore} from "@/stores/token.js";

const userTokenStore = useTokenStore()
const formRef = ref(null)
const loading = ref(false)

//登录按钮功能实现
const loginButton = async () => {
  if (!formRef.value) return
  
  try {
    // 表单验证
    await formRef.value.validate()
    
    loading.value = true
    const response = await adminLoginService(ruleForm)
    
    //存储token - 根据后端返回的数据结构进行调整
    let token = response.data
    if (typeof response.data === 'object' && response.data.token) {
      token = response.data.token
    }
    
    userTokenStore.setToken(token)
    ElMessage.success("登录成功")
    
    // 跳转到管理后台
    await router.push("/admin")
  } catch (error) {
    console.error('登录失败:', error)
    ElMessage.error(error.message || '登录失败，请检查用户名和密码')
  } finally {
    loading.value = false
  }
}

// 回车键登录
const handleKeyPress = (event) => {
  if (event.key === 'Enter') {
    loginButton()
  }
}
</script>

<template>
  <div class="page-container">
    <el-row class="login-page">
      <el-col :span="12" class="bg"></el-col>
      <el-col :span="6" :offset="3" class="form">
        <!-- 登录表单 -->
        <el-form 
          ref="formRef" 
          size="large" 
          :model="ruleForm" 
          autocomplete="off" 
          :rules="registerDataRules"
          @keyup="handleKeyPress"
        >
          <el-form-item>
            <h1>管理员登录</h1>
          </el-form-item>
          <el-form-item prop="username">
            <el-input 
              :prefix-icon="User" 
              v-model="ruleForm.username" 
              placeholder="请输入用户名"
              :disabled="loading"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input 
              :prefix-icon="Lock" 
              v-model="ruleForm.password" 
              type="password"
              placeholder="请输入密码"
              :disabled="loading"
              @keyup.enter="loginButton"
            ></el-input>
          </el-form-item>
          <!-- 登录按钮 -->
          <el-form-item>
            <el-button 
              class="button" 
              type="primary" 
              auto-insert-space 
              @click="loginButton"
              :loading="loading"
              :disabled="loading"
            >
              {{ loading ? '登录中...' : '登录' }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <div class="icp-footer">
      <a href="https://beian.miit.gov.cn/" target="_blank">陕ICP备2023016452号-4</a>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  position: relative;
}

.icp-footer {
  position: fixed;
  bottom: 1%;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 8px 0;
  
  a {
    color: #666;
    text-decoration: none;
    font-size: 14px;
    
    &:hover {
      color: #409EFF;
    }
  }
}

/* 样式 */
.login-page {
  height: 100vh;
  background-color: #fff;

  .bg {
    background: url('https://blog-majun.oss-cn-beijing.aliyuncs.com/book-long.jpg') no-repeat center / auto;
    //border-radius: 0 20px 20px 0;
  }

  .form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    user-select: none;

    .title {
      margin: 0 auto;
    }

    .button {
      width: 100%;
    }

    .flex {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
